<template>
  <div class="wrap">
    <div class="title">
      <div>我的賬戶</div>
      <div></div>
      <div>個人資料</div>
    </div>
    <div class="content">
      <!-- :rules="rules" -->
      <el-form :model="user"  :rules="rules"  ref="userFrom" label-width="150px">
        <el-form-item label="上傳身份證：" prop="userId">   
          <el-upload
            class="avatar-uploader"
            action="https://hometasty.hk/demo/up.php"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>  
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓氏：" prop="csurname" >
              <el-input v-model="user.csurname" placeholder="請輸入姓氏"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名稱：" prop="cname" >
              <el-input v-model="user.cname" placeholder="請輸入名稱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>  
        <el-row>
          <el-col :span="12">
            <el-form-item label="Surname：" prop="esurname" >
              <el-input v-model="user.esurname" placeholder="請輸入英文姓"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Name：" prop="ename" >
              <el-input v-model="user.ename" placeholder="請輸入英文名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>    
        <el-form-item label="身份證號碼：" prop="idCard" >
          <!-- <el-row> 
            <el-col :span="8">
              <el-input v-model="idcard1" placeholder="字母"></el-input>
            </el-col>
            <el-col :span="8">
              <el-input v-model="idcard2" placeholder="123456"></el-input>
            </el-col>
            <el-col :span="8">
              <el-input v-model="idcard3" placeholder="0"></el-input>
            </el-col>
          </el-row> -->
          <el-input v-model="user.idCard" placeholder="請輸入身份證號碼" ></el-input>
        </el-form-item> 
        <el-form-item label="收款人姓名：" prop="name" >
          <el-input v-model="user.name" placeholder="請輸入收款人姓名" ></el-input>
        </el-form-item>
        <el-form-item label="收款人電話：" prop="phone" >
          <el-input v-model="user.phone" placeholder="請輸入收款人電話" ></el-input>
        </el-form-item>
        <el-form-item label="銀行戶口號碼：" prop="bankCard">
          <el-input v-model="user.bankCard" placeholder="請輸入銀行戶口號碼" ></el-input>
        </el-form-item>
        <el-form-item label="銀行名稱：" prop="bankName">
          <el-input v-model="user.bankName" placeholder="請輸入銀行名稱" ></el-input>
        </el-form-item>
        <el-form-item label="入會表格：">
          <!-- <el-input v-model="user.hang" placeholder="請輸入銀行開戶行" ></el-input> -->
          <el-upload
            class="upload-demo"
            action="https://hometasty.hk/demo/up.php"
            :on-success="handleChange"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList"
             ref="upload"
            accept=".pdf,.xls,.xlsx,.doc,.docx"
            >
            <el-button size="small" type="primary">點擊上傳</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div> -->
          </el-upload> 
        </el-form-item>
        <!-- <el-form-item label='會員類型：' prop='type'>
          <el-select v-model="user.type" placeholder="請選擇會員類型" :disabled="true">
            <el-option label="企業" value="enterprise"></el-option>
            <el-option label="個人" value="person"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit('userFrom')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing} from '@/utils/validate';
import {innserBank,getBank,updateBank} from '@/api/user'
import {getToken} from '@/utils/auth';
const defaultUser = {
  bankCard: "",
  bankName: "",
  cname: "",
  csurname: "",
  ename: "",
  esurname: "",
  idCard: "",
  idCardFile: "",
  name: "",
  phone: "",
};
export default {
  data(){
    return{
      userId:null,
      fileList:[],
      imageUrl: '',
      user: Object.assign({}, defaultUser),
      idcard1:null,
      idcard2:null,
      idcard3:null,
      // rules: {
      //   userId:[{message:'請上傳身份證'}],
      //   userxing:[{message:'請輸入姓'}],
      //   userming:[{message:'請輸入名'}],
      //   username:[{message: '請輸入英文名', trigger: 'blur'},{validator:validateXing,trigger:'blur'}],
      //   surname:[{message:'請輸入英文姓',trigger:'blur'},{validator:validateXing,trigger:'blur'}],
      //   idcard:[{message:'請填寫身份證號碼'}],
      //   phone:[{message: '請輸入手機號', trigger: 'blur'}],
      //   ka:[{message: '請輸入銀行卡號', trigger: 'blur'}],
      //   hang:[{message: '請輸入開戶行', trigger: 'blur'}],
      //   shouming:[{message: '請輸入收款人姓名', trigger: 'blur'}],
      // },
      rules: {
        //  userId:[{message:'請上傳身份證',required: true,trigger: 'blur'}],
        csurname:[{message:'請輸入姓氏',required: true,trigger: 'blur'}],
        cname:[{message:'請輸入名稱',required: true,trigger: 'blur'}],
        ename:[{message: '請輸入英文名', trigger: 'blur',required: true}],
        esurname:[{message:'請輸入英文姓',trigger:'blur',required: true}],
        idCard:[{message:'請填寫身份證號碼',required: true,trigger: 'blur'}],
        phone:[{message: '請輸入收款人電話',required: true,  trigger: 'blur'}],
        bankCard:[{message: '請輸入銀行戶口號碼',required: true,  trigger: 'blur'}],
        bankName:[{message: '請輸入銀行名稱',required: true,  trigger: 'blur'}],
        name:[{message: '請輸入收款人姓名', required: true, trigger: 'blur'}],
      },
      isEdit:false,
    }
  },
  mounted(){
    getBank({userId:getToken()}).then(response => {
      if(response.errno == 0){
        this.imageUrl = response.data.idCardFile
        this.user = response.data
        // this.user.userxing = response.data.csurname
        // this.user.userming = response.data.cname
        // this.user.surname = response.data.esurname
        // this.user.username = response.data.ename
        // this.user.idcard1 = response.data.idCard
        // this.user.shouming = response.data.name
        // this.user.phone = response.data.phone
        // this.user.ka = response.data.bankCard
        // this.user.hang = response.data.bankName
        // this.fileList[0].url = response.data.tableFile
        if(response.data.tableFile != '' && response.data.tableFile != null && response.data.tableFile != undefined){
          var name = response.data.tableFile.split('/')[response.data.tableFile.split('/').length-1]
          this.fileList = [
            {
              name:name,
              url:response.data.tableFile
            }
          ]
        }        
        this.isEdit = true
      }else{
        this.user = Object.assign({},defaultUser)
        this.isEdit = false
      }
    })
  },
  methods: {
    beforeAvatarUpload(file){
      let type1 = (file.name).substring((file.name).lastIndexOf(".")+1)
      let type = type1.trim().toLowerCase()
      // const isJPG = type === 'jpeg' || type === 'jpg' || type === 'png';
      // const isText = type === 'doc/txt//xls/docx/xlsx' || type === 'txt' || type === 'pdf' || type === 'xls' || type === 'jpg' || type === 'jpg';
      // const isvideo = type === 'mp4/flv/zip/rar/WMA/MP3/wav';
      const isvideo = type === 'pdf' || type === 'xls' || type === 'xlsx' || type === 'doc' || 
      type === 'docx' 
      console.log(type,isvideo)
      if(isvideo){

      }else{
        this.$message.error('上传格式必须是pdf xls/xlsx doc/docx');
        this.$refs.upload.clearFiles()
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.url;
      this.userId=res.url
    },
    handleChange(file, fileList) {
      console.log(file.url)
      // this.fileList[0].name = file.data.name
      // this.fileList[0].url = file.data.url
      this.fileList = [{
        name:file.name,
        url:file.url
      }]
        // this.fileList = fileList.slice(-3);
    },
    onSelected(data) {
      // 選擇省市區
      // console.log(data.province.value+data.city.value+data.area.value)
      this.user.province = data.province.value;
      this.user.city = data.city.value;
      this.user.district = data.area.value;
      this.isSelected = true;
      // 給選擇的省市區分配壹個區域
      this.districtArray.forEach(element=>{
        if(element.name == this.user.province){
          this.user.region = element.district
        }
      })
    },
    onSubmit(formName) {
      if(this.userId == null){
        this.$message({
          type:'error',
          message:'請上傳身份證'
        })
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
        if(this.fileList.length == 0){
          this.$message({
            type:'error',
            message:'請上傳入會表格'
          })
        }else{
          if(!this.isEdit){
            innserBank({'userId':getToken(),'csurname':this.user.csurname,'cname':this.user.cname,'esurname':this.user.esurname,'ename':this.user.ename,'idCard':this.user.idCard,'name':this.user.name,'phone':this.user.phone,'bankCard':this.user.bankCard,'bankName':this.user.bankName,'tableFile':this.fileList[0].url,'idCardFile':this.imageUrl}).then(response => {
              // console.log('修改個人信息：'+JSON.stringify(response))
              if(response.errno == 0){
                this.$message({
                  type:'success',
                  message:'修改成功',
                })
                this.$router.push({path:'/personal'})
              }else{
                this.$message({
                  type:'error',
                  message:response.errmsg
                })
              }
            })
          }else{
            updateBank({'id':this.user.id,'userId':getToken(),'csurname':this.user.csurname,'cname':this.user.cname,'esurname':this.user.esurname,'ename':this.user.ename,'idCard':this.user.idCard,'name':this.user.name,'phone':this.user.phone,'bankCard':this.user.bankCard,'bankName':this.user.bankName,'tableFile':this.fileList[0].url,'idCardFile':this.imageUrl}).then(response => {
              // console.log('修改個人信息：'+JSON.stringify(response))
              if(response.errno == 0){
                this.$message({
                  type:'success',
                  message:'修改成功',
                })
                this.$router.push({path:'/personal'})
              }else{
                this.$message({
                  type:'error',
                  message:response.errmsg
                })
              }
            })
          }
              
        }
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.brand = Object.assign({},defaultUser);
    }
  }
}
</script>
<style scoped>
  .wrap{
    width: 100%;
    /* height: 1358px; */
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 15px;
  }
  .title{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .title>div:nth-child(1){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(2){
    width: 8px;
    height: 2px;
    background: #333333;
    margin: 0px 10px;
  }
  .title>div:nth-child(3){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .content{
    width: 70%;
  }
  .content>>>.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .content>>>.avatar-uploader .el-upload:hover {
    border-color:#BD9967;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>